<template>
	<el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
		<el-form-item label="文章标题">
			<el-input  placeholder="请输入内容" v-model="form.desc" maxlength="30" show-word-limit clearable></el-input>
		</el-form-item>
		<mavon-editor @change="updateDoc" ref="editor" v-model="editor"></mavon-editor>
		<el-form-item style="margin-top: 20px;">
			<el-button type="primary" @click="onSubmit">立即发布</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		name: 'Edit',
		components: {},
		data() {
			return {
				editor: '',
				form: {
					desc: ''
				}
			}
		},
		methods: {
			onSubmit() {
				if(this.editor !== '' && this.form.desc !== '') {
					if(this.form.desc.length >= 6 && this.editor.length >= 12){
						this.$notify({
							title: '发布成功!',
							message: '是时候建立史诗了!',
							type: 'success'
						});
						console.log('submit!');
					} else{
						this.$message({
						  message: '标题字数必须大于6,文章字数必须12!',
						  type: 'warning'
						});
					}
				}else{
					this.$message({
					  message: '好像还没有输入内容和标题哦!',
					  type: 'warning'
					});
				}
			},
			updateDoc(markdown, html) {
				// 此时会自动将 markdown 和 html 传递到这个方法中
				console.log("markdown内容: " + markdown);
				console.log("html内容:" + markdown);
			}
		},
		beforeCreate: function() {
			console.log('1-beforeCreate 初始化之后')
		},
		created: function() {

			console.log('2-created 创建完成')
		},
		beforeMount: function() {
			console.log('3-beforeMount 挂载之前')
		},
		mounted: function() {
			console.log('4-mounted 被创建')
		},
		beforeUpdate: function() {
			console.log('5-beforeUpdate 数据更新前')
		},
		updated: function() {
			console.log('6-updated 被更新后')
		},
		activated: function() {
			console.log('7-activated 激活的')
		},
		deactivated: function() {
			console.log('8-deactivated 暂停')
		},
		beforeDestroy: function() {
			console.log('9-beforeDestroy 销毁之前')
		},
		destroyed: function() {
			console.log('10-destroyed 销毁之后')
		}
	}
</script>

<style scoped>
</style>
